import React, {useState} from 'react'
import Flatpickr from "react-flatpickr";
import {Russian} from "flatpickr/dist/l10n/ru";
import "flatpickr/dist/flatpickr.min.css";
import "../../../assets/scss/plugins/forms/flatpickr/flatpickr.scss"
import {parseUnixTime, unixTime} from '../../../helpers/utils'
import {Calendar, Clock} from "react-feather";

const DataAndTime = props => {
  const {date, setDate} = props
  const newDate = date ? parseUnixTime(date) : ''

  const dateOnChange = date => {
    setDate(unixTime(new Date(date[0].getFullYear(), date[0].getMonth(), date[0].getDate(), newDate.getHours(), newDate.getMinutes(), 0)))
  }

  const timeOnChange = time => {
    setDate(unixTime(new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), time[0].getHours(), time[0].getMinutes(), 0)))
  }

  return (
    <div
      className="task__flatpickr-group position-relative d-flex justify-content-between align-items-center mt-3 flex-wrap">
      <h5 className="mb-1">Завершить</h5>
      <div className="d-flex mb-1">
        <div className="flatpickr-group mr-1">
          <Flatpickr
            value={new Date(newDate)}
            options={{
              dateFormat: "d-m-Y",
              locale: Russian,
              minDate: new Date() < new Date(newDate) ? new Date() : new Date(newDate)
            }}
            onChange={dateOnChange}
            className={`form-control`}
          />
          <div className={`form-control-position flatpickr-group-icon `}>
            <Calendar size={16}/>
          </div>
        </div>
        <div className="flatpickr-group">
          <Flatpickr
            options={{
              enableTime: true,
              noCalendar: true,
              dateFormat: "H:i",
              time_24hr: true,
              minDate: new Date() < new Date(newDate) ? new Date() : new Date(newDate)
            }}
            value={new Date(newDate)}
            onChange={timeOnChange}
            className={`form-control`}
          />
          <div className={`form-control-position flatpickr-group-icon `}>
            <Clock size={16}/>
          </div>
        </div>
      </div>
    </div>
  )
};

export default DataAndTime
